<template>
  <div class="lssc">
    <div v-for="(item, index) in lsscList" :key="index" class="lsscitem">
      <div class="circle"></div>
      <div class="content" @click="onDetails(item)">{{ item.name }}</div>
    </div>
    <el-dialog v-model="dialog.visible" class="customDialog" :title="dialog.title" width="500px">
      <el-table class="zylbTable" :highlight-current-row="false" :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="姓名" />
        <el-table-column show-overflow-tooltip prop="sjh" label="手机号" />
        <el-table-column show-overflow-tooltip prop="zw" label="职务" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import useMapStore from '@/store/modules/map';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const $szxcapi = (proxy as any)?.$szxcapi;
const lwydRef = ref<InstanceType<typeof DialogTable>>();
const dialog = reactive<DialogOption>({
  visible: false,
  title: '详情信息'
});
const tableData = ref([]);
const lsscList = ref([
  {
    name: '两委干部',
    value: '两委干部'
  },
  {
    name: '后备干部',
    value: '后备干部'
  },
  {
    name: '监督委员会',
    value: '监督委员会'
  },
  {
    name: '驻村工作队',
    value: '驻村工作队'
  }
]);

const onDetails = async (item) => {
  // dialog.visible = true;
  let data = [];
  const params = {
    'ssc': useMapStore().countryText
  };
  if (item.name == '两委干部') {
    data = await $szxcapi.zcgzdQuery(params);
  } else if (item.name == '后备干部') {
    data = await $szxcapi.hbgbQuery(params);
  } else if (item.name == '监督委员会') {
    data = await $szxcapi.jdwyhQuery(params);
  } else {
    data = await $szxcapi.zcgzdQuery(params);
  }
  tableData.value = data.data;
  dialog.visible = true;
  console.log('data', data);
};
</script>

<style lang="scss" scoped>
.lssc {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 14px 22px 10px 32px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  .lsscitem {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 48px;
    width: 90%;
    .circle {
      width: 11px;
      height: 11px;
      background: linear-gradient(0deg, #4ab1ff, #ffffff);
      border-radius: 2px;
    }
    .content {
      margin-left: 10px;
      cursor: pointer;
      width: 100%;
      padding: 8px;
      font-size: 26px;
      font-weight: 400;
      font-family: 'DingTalk';
    }
  }
  .lsscitem:nth-child(1),
  .lsscitem:nth-child(3) {
    background: linear-gradient(0deg, #e5bcf3 0%, #ffffff 74.4873046875%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    .content {
      background: url('@/assets/ghbj/img1.png') no-repeat 0 0 / contain;
      background-position: 0 100%;
    }
  }
  .lsscitem:nth-child(2),
  .lsscitem:nth-child(4) {
    background: linear-gradient(0deg, #b8efac 0.5126953125%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    .content {
      background: url('@/assets/ghbj/img3.png') no-repeat 0 0 / contain;
      background-position: 0 100%;
    }
  }
}
</style>
